<template>
  <div class="d-flex flex-col gap-col-8">
    <div class="d-flex flex-row gap-row-8 align-start">
      <label class="container" :style="{ ...sizeStyle }">
        <input v-model="modelValue" type="checkbox" />
        <span
          class="checkmark"
          :style="{ ...sizeStyle }"
          :class="{
            sm: props.size === 'sm',
            md: props.size === 'md',
            lg: props.size === 'lg',
            white: props.markColor === 'white',
            primary: props.markColor === 'primary',
          }"
        ></span>
      </label>
      <div class="font-size-10 font-weight-500 line-height-125 pl-1">{{ info }}</div>
    </div>
    <div v-if="error" class="font-size-12 text-primary-x">{{ error }}</div>
  </div>
</template>
<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: { type: Boolean, default: false, required: false },
  info: { type: String, required: false, default: '' },
  error: { type: String, required: false, default: '' },
  size: { type: String, default: 'sm' },
  markColor: { type: String, default: 'white' },
})

const emit = defineEmits(['update:modelValue'])

const modelValue = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value),
})

const sizeStyle = computed(() => {
  switch (props.size) {
    case 'sm':
      return { width: '1rem', height: '1rem' }
    case 'md':
      return { width: '1.25rem', height: '1.25rem' }
    case 'lg':
      return { width: '1.5rem', height: '1.5rem' }
    default:
      return { width: '1rem', height: '1rem' }
  }
})
</script>
<style scoped lang="scss">
.container {
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.container input {
  display: none;
}

.checkmark {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;

  border-radius: 0.25rem;
  background-color: #181925;
}

.container:hover input ~ .checkmark {
  background-color: #181925;
}

.container input:checked ~ .checkmark {
  background-color: #181925;
}

.checkmark:after {
  content: '';
  position: absolute;
  display: none;

  border: solid #ffffff;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.container input:checked ~ .checkmark:after {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .checkmark.sm:after {
  left: 6px;
  top: 2.5px;
  width: 5px;
  height: 10px;
}

.container .checkmark.md:after {
  left: 8px;
  top: 4px;
  width: 7px;
  height: 14px;
}

.container .checkmark.lg:after {
  left: 9px;
  top: 2.5px;
  width: 9px;
  height: 18px;
}

$mark-color: (
  white: #ffffff,
  primary: #f42c52,
);

@each $key, $value in $mark-color {
  .checkmark.#{$key}:after {
    border-color: $value;
  }
}
</style>
